<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    // navigationBarTitleText: '打赏',
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <view 
    :class="[themeConfig.theme === 'dark' ? 'recharge-dark-bg' : 'recharge-container']" 
  >
  
  </view>
</template>
  
<script lang="ts" setup>
import { enumParams } from "@/enum";
import { useCommonStore, useThemeStore, useUserStore } from "@/store";
import { gift } from '@/static/base64/index';
import { UserBalanceInfoReward } from "@/service/db_feature";
import { useMessage, useToast } from "wot-design-uni";

// 主题颜色
const { themeConfig } = useThemeStore();
const user = useUserStore();
const toast = useToast();
const message = useMessage();
const common = useCommonStore();

const fromData = reactive({
  userId: user.userInfo.id,
  amount: undefined,
})

// 打赏
const loading = ref(false);
const submit = async () => {
  try {
    loading.value = true;
    const res = await UserBalanceInfoReward(fromData);
    loading.value = false;
    if (res.code != 200) {
      uni.hideLoading();
      return toast.show(res.message);
    }
    toast.show('打赏成功，感谢您的支持~');
    fromData.amount = undefined;
  } catch (error) {
    loading.value = false;
    console.log(error);
  }
}

// 打赏提示
const getRewardConfirm = () => {
  if (!fromData.amount) return toast.show('请输入金额!');
  message
    .confirm({
      msg: `将会消耗${fromData.amount}的乐缘币, 是否继续？`,
      title: '打赏提示'
    })
    .then(() => {
      submit();
    })
    .catch(() => {
      console.log('点击了取消按钮')
    })
}

onShow(() => {
  nextTick(() => {
    // 设置页面标题
    themeConfig.title = '打赏';
  })
})
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
:deep(.wd-input__label) {
  display: none !important;
}

.recharge-container {
  :deep(.wd-input) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: #FEFAF2 !important;
  }
}

.recharge-dark-bg {
  :deep(.wd-input) {
    background-color: #141414 !important;
  }
}
</style>
  